<template>
	<view class="tabbar">
		<view class="navigator">
			<block v-for="(item,index) in tabBar.list" :key="item.pagePath">
				<view :class="index === selectedIndex?'navigator-item tab_bg':'navigator-item'"
					@click="switchTab(item,index)">
					<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
					<img :src="item.selectedIconPath" class="icon" v-else>
					<view :class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</view>
				</view>
				<view v-if="index===1" class="tabbar_butt">
					<view class="tabber_box" @click="hnadleClick">
						<view class="tabber_conter">
							<image src="../../static/imgs/tabBar_ys.png" mode=""></image>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: uni.getStorageSync('selectedIndex') || 0,
				tabBar: {
					list: [{
						"pagePath": "pages/index/index",
						"iconPath": "../../static/imgs/index_1.png",
						"selectedIconPath": "../../static/imgs/index_0.png",
						"text": "首页"
					}, {
						"pagePath": "pages/property/index",
						"iconPath": "../../static/imgs/wuye_1.png",
						"selectedIconPath": "../../static/imgs/wuye_1.png",
						"text": "物业"
					}, {
						"pagePath": "pages/shoppingMall/index",
						"iconPath": "../../static/imgs/shancheng.png",
						"selectedIconPath": "../../static/imgs/shancheng_0.png",
						"text": "商城"
					}, {
						"pagePath": "pages/my/index",
						"iconPath": "../../static/imgs/me_1.png",
						"selectedIconPath": "../../static/imgs/me_0.png",
						"text": "我的"
					}]
				},
			}
		},
		methods: {
			hnadleClick() {
				console.log(12312312);
			},
			switchTab(item, index) {
				let url = '/' + item.pagePath
				let pagePath = url
				uni.switchTab({
					url
				})
				this.tabBar.list.forEach((v, i) => {
					if (item.pagePath === v.pagePath) {
						// console.log(item.pagePath, v.pagePath, index);
						uni.setStorageSync('selectedIndex', index);
					}
				})
			}
		},
	}
</script>


<style>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		z-index: 999;
		background: white;
		border-top: 2rpx solid #eee;
	}

	.navigator {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.tabbar_butt {
		width: 190rpx;
		height: 100rpx;
		position: relative;
	}

	.tabber_box {
		width: 120rpx;
		height: 120rpx;
		border-top: 2rpx solid #ECECEC;
		border-radius: 120rpx;
		position: absolute;
		top: -48rpx;
		background-color: white;

	}

	.tabber_conter {
		width: 96rpx;
		height: 96rpx;
		margin: auto;
		border-radius: 96rpx;
		background: linear-gradient(0deg, #005FFE 0%, #00A5FF 100%);
		border-top: 2rpx solid #ECECEC;
		position: absolute;
		top: 12rpx;
		left: 12rpx;
		display: flex;
		align-items: center;
	}

	.tabber_conter>image {
		width: 64rpx;
		height: 62rpx;
		margin: auto
	}

	.navigator-item {
		width: 250rpx;
		text-align: center;
		height: 100%;
	}

	.navigator-item>img {
		margin-top: 20rpx;
	}

	.navigator-item>view {
		line-height: 20rpx;
	}

	.item-text {
		/* margin-top: 6rpx; */
		color: #777E86;
		font-size: 22rpx;
	}

	.text-active {
		color: #2E92FD !important;
	}

	.icon {
		width: 18px;
		height: 18px;
	}

	.tab_bg {
		background-color: #F5F5F5;
		transition: 1s;
	}
</style>
